<template>
 <div class="App">
   <h1 class="title">App组件</h1>
   <p>{{count}}</p>
   <button @click="getRef">getRef</button>
   <Count :changeCount="changeCount" :count="count" :info="info" v-bind="score" ref="countCom"/>
 </div>
</template>

<script>
import Count from './components/Count.vue'
export default {
  name: "App",
  components: {
    Count
  },
  data() {
    return {
      count: 1,
      info: {
        name: 'zhang',
        age: 10
      },
      score: {
        math: 80,
        chinese: 100,
        English: {
          teacher:'lili',
          project: '外语'
        }
      }
    }
  },
  methods: {
    changeCount(n) {
      this.count += n;
    },
    getRef() {
      console.log(this.$refs.countCom.teacherName);
    }
  }

}
</script>

<style scoped>
  .App {
    background-color: rgba(255, 105, 180, 0.378);
  }
  .title {
    background: skyblue;
  }
  .App >>> .content {
    background: rgb(182, 206, 21);
  }
</style>